<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.css">

</head>
<body>
	<div class="container">
		<div>
			<!-- 图片 -->
			<a href="/"> <img alt="" src="/resource/pic/logo-admin.jpg" height="50" width="100" ></a> 
			<hr>
		</div>
		<div class="row">
			<div class="col-md-6">
					
					
				<form:form action="/user/register" method="post" modelAttribute="user" id="regForm">
				
					<div class="form-group">
						<label for="username">用户名：</label> 
						<form:input path="username" class="form-control"  id="username" />
						<form:errors path="username" cssStyle="color:red"></form:errors>
						<span id="usernameMsg" style="color:red"></span>
					</div>
					
					<div class="form-group">
						<label for="password">密码：</label>
						<form:input path="password" class="form-control"  id="password" />
						<form:errors path="password" cssStyle="color:red"></form:errors>
					</div>
					
					<div class="form-group">
						<label for="repassword">再次输入密码：</label>
						<input type="text" class="form-control"  id="repassword" name="repassword" />
						<span id="repasswordMsg" style="color:red"></span>
					</div>
					
					<div class="form-group">
						<label for="nickname">昵称：</label> 
						<form:input path="nickname" class="form-control"  id="nickname" />
						<form:errors path="nickname" cssStyle="color:red"></form:errors>
					</div>
					
					<div class="form-group">
						<label for="birthday">生日：</label> 
						<form:input path="birthday" type="date" class="form-control"  id="birthday" />
						<form:errors path="birthday" cssStyle="color:red"></form:errors>
					</div>
					
					<div class="form-group">
						<label for="gender">性别：</label> 
						
						<div class="form-check form-check-inline">
							
							<form:radiobutton path="gender" class="form-check-input"  id="inlineRadio1"  value="0"  />	
							<label class="form-check-label" for="inlineRadio1">女</label>
						</div>
						<div class="form-check form-check-inline">
							
							<form:radiobutton path="gender" class="form-check-input"  id="inlineRadio2"  value="1" />
							<label class="form-check-label" for="inlineRadio2">男</label>
						</div>
					</div>
					
					<div class="form-group">
						<input type="reset" value="重置" class="btn btn-primary"></button>
						<input type="button" onclick="sub()" value="注册" class="btn btn-primary"></button>
					</div>
				</form:form>
			</div>
			<!-- 加上图片 -->
			<div class="col-md-6">
				<img alt="" src="/resource/pic/bg-reg.jpg" height="300">
			</div>
		</div>
	</div>
	
</body>
<script type="text/javascript">
	function sub(){
		//使用ajax校验用户名是否已存在
		
		$.post(
			"/user/checkUsername",		
			{username:$("#username").val()},
			function(result){
				if(result){
					//如果已经存在这个用户名
					//提示错误信息
					$("#usernameMsg").html("该用户名已存在！");
				}else{
					//如果没有当前的用户名，则可以进行提交
					$("#usernameMsg").html("");
					
					//校验再次输入密码是否正确
					var password = $("#password").val();
					var repassword = $("#repassword").val();
					
					if(repassword != password){
						//如果两个密码不相等，则提示错误信息
						$("#repasswordMsg").html("两次输入的密码不一致！");
						
					}else{
						//如果两个密码相等，则提交
						$("#repasswordMsg").html("");
						
						//提交数据，进行注册
						$("#regForm").submit();
					}
				}
			}
		)
		
		
	}
</script>
</html>